<template>
    <div class="wrapper" @click="click">
        <div class="content">
            <i class="fa fa-arrows-alt"/><span class="screenfull-text">全屏显示</span>
        </div>
    </div>
</template>
<script lang="ts">
  import {Component, Vue} from 'vue-property-decorator';
  import screenfull from 'screenfull';

  @Component
  export default class Screenfull extends Vue {
    private isFullscreen = false;

    click() {
      if (!screenfull.isEnabled) {
        this.$message({
          message: '您的浏览器无法进入全屏模式',
          type: 'warning'
        });
        return false
      }
      screenfull.toggle()
    }

    change() {
      this.isFullscreen = (screenfull as any).isFullscreen;
    }

    init() {
      if (screenfull.isEnabled) {
        screenfull.on('change', this.change)
      }
    }

    destroy() {
      if (screenfull.isEnabled) {
        screenfull.off('change', this.change)
      }
    }

    mounted() {
      this.init()
    }

    beforeDestroy() {
      this.destroy()
    }
  }
</script>

<style scoped lang="scss">
    .wrapper {
        color: #ffffff;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 5px;
        cursor: pointer;

        .content {
            .screenfull-text {
                margin-left: 3px;
            }
        }

        &:hover {
            background-color: rgba(0, 0, 0, .1);
        }
    }
</style>

